<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档对象模型</title>
</head>
<body>
<table border="1" cellspacing="0" width="50%">
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    <tr>
        <td>1</td>
        <td>admin</td>
        <td>123456</td>
    </tr>
    <tr>
        <td>1</td>
        <td>admin</td>
        <td>123456</td>
    </tr>
    <tr>
        <td>1</td>
        <td>admin</td>
        <td>123456</td>
    </tr>
</table>

<!--
    获取p标签中的文本内容 ？  dom
    1. 获取节点对象
      常用的方法:
         1.1 getElementsByTagName()   根据标签名
         1.2 getElementsByClassName('p3') 根据class
         1.3 getElementById('p2')
         1.4 querySelector('.p3')
         1.5 querySelectorAll('#p2')
-->
<p id="p2">这是javascript dom 操作2</p>
<p>这是javascript dom 操作1</p>
<p class="p3">这是javascript dom 操作3</p>
<p class="p3">这是javascript dom 操作4</p>
<!-- js编写的位置 一般放置在head或body中 如果在js中有对接点的操作 建议将js标签放在body的最后 -->
<script>
    //获取页面中指定标签的所有节点对象  []
    var eles = document.getElementsByTagName('p')
    console.log(eles[0])
    console.log(eles[1])
    console.log(eles)
    // 根据class属性获取节点  []
    eles = document.getElementsByClassName('p3')
    console.log(eles[0])
    console.log(eles[1])

    // 根据节点id属性获取节点对象
    var ele = document.getElementById('p2')
    console.log(ele)
    console.log('-----------------------------------')
    // 通过css选择器选择节点   返回第一个匹配的节点对象
    // var result = document.querySelector('p')
    var result = document.querySelector('.p3')
    // 返回所有匹配的节点对象
    // result = document.querySelectorAll('.p3')
    result = document.querySelectorAll('#p2')
    console.log(result)
</script>
</body>
</html>